<!doctype html>
<html>
<head>
	<script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script>
	<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css">

	<script type="text/javascript" src="./sidebar.js"></script>
	<link rel="stylesheet" type="text/css" href="./sidebar.css">

	<script type="text/javascript" src="./data/data.js"></script>
	<style>
		.menu, .webix_form.menu{
			background: #ECEFF1;

		}
		.app_button button{
			padding:0;
			text-align: center;
		}

	</style>
</head>
<body>

<script type="text/javascript">
	webix.ready(function(){
		webix.ui({
			rows: [
				{   view: "toolbar", padding:3, elements: [
						{ view: "label", label: "My App"},
						{},
						{ view: "button", type: "icon", width: 45, css: "app_button", icon: "envelope-o",  badge:4},
						{ view: "button", type: "icon", width: 45, css: "app_button", icon: "bell-o",  badge:10}
					]
				},
				{
					cols:[

						{
							template: ""
						},
						{
							rows:[
								{
									css: "menu",
									padding: 2,
									view: "form",
									cols:[
										{view: "button", type: "icon", icon: "bars", inputWidth: 37, align: "left", css: "app_button menu", click: function(){
												$$("$sidebar1").toggle()
											}
										}
									]
								},

								{
									view: "sidebar",
									collapsed: true,
									position: "right",
									data: menu_data
								}
							]


						}
					]
				}
			]
		});


	});
</script>
</body>
</html>